<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>2016情人节</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		/* 全局 */
		*,body{
			margin: 0;
			font-family: "microsoft yahei";
			font-size: 1.3rem;
			overflow: hidden;
			width: 100%;
			height: 100%;
		}
		a{
			text-decoration: none;
		}
		.page{
			position: absolute;
			top:0;
			left:0;
			background-color: #774f43;
		}
		.page>.bg{
			position: absolute;
			z-index: -1;
			background-color: #000;
			width: 100%;
			height:20%;
		}
		.page>.content{
			font-size: 1rem;
			color: #fff; 
			word-wrap: break-word;
			padding:0 5px;
			padding-top: 6.5rem;
		}
		.page .innerImg{
			height:auto;
			width:75%;
		}
		/* 第一页 */
		#page1{
			z-index: 4;
			
		}
		#page1>.bg{
			height:auto;
		}
		#page1>#page1_clickMe{
			position: absolute;
			top: 21.5rem;
			left: 5.5rem;
			width:40%;
			height:10%;
			font-size: 1rem;
			color: #fff;
			text-align: center;
		}
		/* 第二页 */
		#page2{
			z-index: 3;
			display: none;
		}
		/* 第三页 */
		#page3{
			z-index: 2;
			display: none;
		}
		#page3 .innerImg{
			width:40%;
		}
		/* 第四页 */
		#page4{
			z-index: 1;
			display: none;
		}
		#page4 .innerImg{
			width:75%;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$("#page1").click(function(){
				$(".page").hide();
				$("#page2").show();
			});
			$("#page2").click(function(){
				$(".page").hide();
				$("#page3").show();
			});
			$("#page3").click(function(){
				$(".page").hide();
				$("#page4").show();
			});
			$("#page4").click(function(){
				$(".page").hide();
				$("#page1").show();
			});
		});
	</script>
</head>
<body>
	<div class="page" id="page1">
		<img class="bg" alt="" src="${resourcePath }/img/valentineDay2016/letter_love.jpg"/>
		<a href="javascript:;" id="page1_clickMe">
			Touch To Love<br/>
			@呵Sever
		</a>
	</div>
	<div class="page" id="page2">
		<img class="bg" alt="" src="${resourcePath }/img/valentineDay2016/letter_paper.jpg"/>
		<pre class="content">
	国宝宝，同你一齐588日啦！听日冇时间准备咁多，所以今日准备。
	<img class="innerImg" src="${resourcePath }/img/valentineDay2016/brown1.png"/>
	平时你话同我一齐好唔开心，我觉得好心痛。心痛你唔开心，心痛你过得唔到快乐。
		</pre>
	</div>
	<div class="page" id="page3">
		<img class="bg" alt="" src="${resourcePath }/img/valentineDay2016/letter_paper.jpg"/>
		<pre class="content">
	同你咁多日冇俾过乜惊喜你，只因我太木，太呆啦。今次冇精心策划，但都希望你开心。
		  <img class="innerImg" src="${resourcePath }/img/valentineDay2016/brown2.png"/>
	过多10几日，你就要离开广州唔再翻来，我好唔舍得你，谂起以前做过啲衰嘢觉得好内疚，好后悔将自己丑陋一面展示俾你睇，如果仲有时间俾我，我一定比宜家更好，可惜。。。我自己攞来，结果却要你去承担。。。
		</pre>
	</div>
	<div class="page" id="page4">
		<img class="bg" alt="" src="${resourcePath }/img/valentineDay2016/letter_paper.jpg"/>
		<pre class="content">
	正因为你，我先学识点样去爱一个人，唔想同其他人一齐，唔想同其他人结婚。如果仲有机会，希望你可以嫁俾我，我会尽一切努力修正自己的bug，达到客户（你）的需求。
	国宝宝，情人节快乐~我❤你
	<img class="innerImg" src="${resourcePath }/img/valentineDay2016/brown3.png"/>
		</pre>
	</div>
</body>
</html>